<template>
  <div class="d-selecter">
    <el-select v-model="model" multiple :multiple-limit="4" filterable placeholder="请选择查询指标">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script setup name="DSelecter">
import dayjs from 'dayjs'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => [
      {
        value: '1',
        label: '送端换流站1_环流大小'
      },
      {
        value: '2',
        label: '送端换流站1_电压波动率'
      },
      {
        value: '3',
        label: '送端换流站1_有功上限裕度'
      },
      {
        value: '4',
        label: '送端换流站1_有功下限裕度'
      },
      {
        value: '5',
        label: '送端换流站1_直流电压偏差'
      }
    ]
  }
})

const emit = defineEmits(['update:modelValue'])

const model = useVModel(props, 'modelValue', emit)

// console.log(model.value)
</script>

<style lang="scss" scoped>
.d-selecter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  .el-select {
    :deep(.el-select__wrapper) {
      background-color: transparent;
      box-shadow: 0 0 0 1px rgba(44, 173, 255, 0.5);

      .el-input__inner {
        color: #fff;
      }
    }

    :deep(.el-tag.el-tag--info) {
      background-color: #2c9cf0;
      color: #fff;
    }

    :deep(.el-tag .el-tag__close) {
      color: #fff;
    }
  }
}
</style>
